<template>
  <el-container>
    <el-aside width="200px">
      <SideMenu></SideMenu>
    </el-aside>
    <el-container>
      <el-header>
        <strong>中国云咖</strong>
        <div class="header-face">
          <!-- 头像 -->
          <el-avatar size="medium" :src="userInfo.avatar"></el-avatar>
          <el-dropdown>
                        <span class="el-dropdown-link">
                            {{ userInfo.username }}<i class="el-icon-arrow-down wl-icon--right"></i>
                        </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="toUserCenter">个人中心</el-dropdown-item>
              <el-dropdown-item @click.native="toSetPwd">修改密码</el-dropdown-item>
              <el-dropdown-item>注销账户</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <Tabs></Tabs>
        <div style="margin: 0 20px;">
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import SideMenu from '@/components/SideMenu'
import Tabs from '@/components/Tabs'

export default {
  components: {
    SideMenu,
    Tabs
  },
  props: {},
  data() {
    return {
      userInfo: {
        username: '',
        avatar: ''
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    toUserCenter() {
      this.$router.push('/usercenter')
    },
    toSetPwd() {
      this.$router.push('/setpwd')
    },
    loadUserInfo() {
      this.$axios.get('/user/userinfo/' + this.userInfo.username).then(response => {
        this.userInfo = response.data.data
      }).catch(error => {
        console.log(error);
      })
    },
    logout() {
      this.$store.commit('RESET_TOKEN', '')
      sessionStorage.clear()
      localStorage.clear()
      this.$router.push('/login')
    }
  },
  created() {
    this.userInfo.username = this.$getSessionStorage('username')
    this.loadUserInfo()
  },
  mounted() {
  }
};
</script>
<style scoped>
.el-container {
  padding: 0;
  margin: 0;
  height: 100%;
}

.el-aside {
  color: #333;
  line-height: 200px;
  text-align: left;
}

.el-header {
  background-color: #f8f8fa;
  color: #494856;
  text-align: left;
  line-height: 60px;
}

.el-main {
  color: #333;
  padding: 0;
}

.header-face {
  float: right;
  width: 110px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.app-container {
  display: flex;
  height: 100%;
}

.sidebar {
  width: 200px;
  background-color: #304156;
  color: #fff;
}

.main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.app-title {
  font-size: 20px;
  color: #333;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  margin-right: 10px;
}

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 20px;
  background-color: #f5f7fa;
}

.page-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.el-tabs {
  margin-bottom: 20px;
}

.el-tabs__header {
  border-bottom: 1px solid #ddd;
}

.el-tabs__item {
  font-size: 16px;
  color: #333;
  padding: 10px 20px;
}

.el-tabs__active-bar {
  height: 3px;
  background-color: #ff6b6b;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  color: #333;
  font-size: 16px;
  cursor: pointer;
}

.el-dropdown-menu {
  width: 140px;
}

.el-dropdown-item {
  font-size: 14px;
  color: #333;
  padding: 10px;
}

.el-dropdown-item:hover {
  background-color: #f5f7fa;
}
</style>